<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>攻略</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
	</head>
	<style type="text/css">
	    .moduleTitle {padding: 10px;border-left: solid 5px palevioletred;background-color: rgba(255,255,255,.7);border-bottom-right-radius: 0px;border-top-right-radius: 0px}
		img.hotline {height: auto !important;max-width: initial !important;width: 100%;}
		p.price {position: absolute;bottom: 11px;}
		button.more{margin: 10px auto;background-color: transparent;color: palevioletred;border: solid 2px palevioletred;border-radius: 10px; padding: 4px;width: 38%;}
		div.xinluDes{position: absolute !important;opacity: 0.5 !important;background: #000 !important;color: #fff !important;height: 50px !important;font-family: '微软雅黑';font-size: 18px !important;bottom: 5px !important;line-height: 50px !important;box-shadow: 0px 0px 6px #000;http://127.0.0.1:8020/travel/img/xianlu_pic3.jpg}
		img.xinluImg{height: 200px !important;}
		.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {background-color: palevioletred;}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {color: palevioletred;border-bottom: 2px solid #007aff; background: 0 0;}
	    img.freeImg{line-height: 100px !important;max-width: 150px !important;height: 100px !important;}
	     p.freeDes{white-space: normal !important;}
	</style>
	<script src="../../js/mui.min.js" type="text/javascript"></script>
	<script src="../../js/jquery.min.js" type="text/javascript"></script>
	<body>
		<!--header s-->
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">攻略</h1>
		</header>
		<!--header e-->
		<!--主内容区     s-->
		<div class="mui-content" style="margin-top: 10px;">
			<!--线路推荐       s-->
			<div class="moduleTitle">线路推荐</div>
                <!--线路推荐   s-->
				<div class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<!--floor1 s-->
						<div class="mui-slider-item">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-12">
									<a class="shoudan"><img class="mui-media-object xinluImg" src="../../img/xianlu_pic1.jpg" style="position:relative">
										<div class="mui-media-body xinluDes" >丽江古镇一日游</div>
									</a>
									<div style="margin-top:8px; color:#f44236; font-size: 14px;">¥80</div>
								</li>
							</ul>
						</div>
						<!--floor1 e-->
						<!--floor2 s-->
						<div class="mui-slider-item">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-12">
									<a class="shoudan"><img class="mui-media-object xinluImg" src="../../img/xianlu_pic2.jpg" style="position:relative">
										<div class="mui-media-body xinluDes" >丽江古镇一日游</div>
									</a>
									<div style="margin-top:8px; color:#f44236; font-size: 14px;">¥60</div>
								</li>
							</ul>
						</div>
						<!--floor2 e-->
						<!--floor3 s-->
						<div class="mui-slider-item">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-12">
									<a class="shoudan"><img class="mui-media-object xinluImg" src="../../img/xianlu_pic3.jpg" style="position:relative">
										<div class="mui-media-body xinluDes" >丽江古镇一日游</div>
									</a>
									<div style="margin-top:8px; color:#f44236; font-size: 14px;">¥100</div>
								</li>

							</ul>
						</div>
						<!--floor3 e-->
						<!--floor4 s-->
						<div class="mui-slider-item">
							<ul class="mui-table-view mui-grid-view mui-slider-item-duplicate">
								<li class="mui-table-view-cell mui-media mui-col-xs-12">
									<a class="shoudan"><img class="mui-media-object xinluImg" src="../../img/xianlu_pic4.jpg" style="position:relative">
										<div class="mui-media-body xinluDes">丽江古镇一日游</div>
									</a>
									<div style="margin-top:8px; color:#f44236; font-size: 14px;">¥40</div>
								</li>
							</ul>
						</div>
						<!--floor4 e-->

					</div>
				</div>
            <!--线路推荐   e-->
            <!--国内游       s-->
			<div class="moduleTitle">国内游</div>
			<div class="mui-slider" style="background-color: #fff;">
				<!--control部分    s-->
			    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			        <a class="mui-control-item item mui-active" href="#item1">北京</a>
			        <a class="mui-control-item item" href="#item2">上海</a>
			        <a class="mui-control-item item" href="#item3">广州</a>
			    </div>
			    <!--control部分    e-->
			    <!--content部分    s-->
			    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
			    <div class="mui-slider-group">
			    	<!--item1  s-->
			        <div id="item1" class="mui-slider-item mui-control-content mui-active">
			            <ul class="mui-table-view mui-grid-view">
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic6.jpg">
			                        <div class="mui-media-body">童话里的故事都是骗人的 ，现实中的麻烦是免费还包邮的</div>
			                    </a>
			                </li>
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic5.jpg">
			                        <div class="mui-media-body">每个人都崇拜英雄，因为他们从来都不输。但我们还是执意成为自己，因为输了，我也不怕。</div>
			                    </a>
			                </li>
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic4.jpg">
			                        <div class="mui-media-body">我们的眼睛，容不下一颗沙，却装得下一座磅礴的沙漠。最难的是开始，更难的是结束。</div>
			                    </a>
			                </li>
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic3.jpg">
			                        <div class="mui-media-body">生活就是这么烧脑，真相永远纠缠不清，自尊心也总太淘气，但是，能够任性，才是幸运。我在哪，哪就出事，多么霸气！</div>
			                    </a>
			                </li>
			            </ul>
			            <button type="button" class="mui-btn mui-btn-blue mui-btn-block more" id="beijingMore">查看更多</button>
			        </div>
			        <!--item1  e-->
			        <!--item2  s-->
			        <div id="item2" class="mui-slider-item mui-control-content">
			             <ul class="mui-table-view mui-grid-view">
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic1.jpg">
			                        <div class="mui-media-body">童话里的故事都是骗人的 ，现实中的麻烦是免费还包邮的</div>
			                    </a>
			                </li>
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic2.jpg">
			                        <div class="mui-media-body">每个人都崇拜英雄，因为他们从来都不输。但我们还是执意成为自己，因为输了，我也不怕。</div>
			                    </a>
			                </li>
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic3.jpg">
			                        <div class="mui-media-body">我们的眼睛，容不下一颗沙，却装得下一座磅礴的沙漠。最难的是开始，更难的是结束。</div>
			                    </a>
			                </li>
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic4.jpg">
			                        <div class="mui-media-body">生活就是这么烧脑，真相永远纠缠不清，自尊心也总太淘气，但是，能够任性，才是幸运。我在哪，哪就出事，多么霸气！</div>
			                    </a>
			                </li>
			            </ul>
			            <button type="button" class="mui-btn mui-btn-blue mui-btn-block more" id="shanghaiMore">查看更多</button>
			        </div>
			        <!--item2  e-->
			        <!--item3  s-->
			        <div id="item3" class="mui-slider-item mui-control-content">
			             <ul class="mui-table-view mui-grid-view">
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic4.jpg">
			                        <div class="mui-media-body">童话里的故事都是骗人的 ，现实中的麻烦是免费还包邮的</div>
			                    </a>
			                </li>
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic2.jpg">
			                        <div class="mui-media-body">每个人都崇拜英雄，因为他们从来都不输。但我们还是执意成为自己，因为输了，我也不怕。</div>
			                    </a>
			                </li>
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic3.jpg">
			                        <div class="mui-media-body">我们的眼睛，容不下一颗沙，却装得下一座磅礴的沙漠。最难的是开始，更难的是结束。</div>
			                    </a>
			                </li>
			                <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    <a href="#">
			                        <img class="mui-media-object" src="../../img/xianlu_pic1.jpg">
			                        <div class="mui-media-body">生活就是这么烧脑，真相永远纠缠不清，自尊心也总太淘气，但是，能够任性，才是幸运。我在哪，哪就出事，多么霸气！</div>
			                    </a>
			                </li>
			            </ul>
			            <button type="button" class="mui-btn mui-btn-blue mui-btn-block more" id="guangzhouMore">查看更多</button>
			        </div>
			    	<!--item3  e-->
			    </div>
				<!--content部分  e-->
			</div>
			<!--国内游        e-->
			<!--出境游         s-->
			<div class="moduleTitle">出境游</div>
			<div class="chujing" style="background-color: #fff;">
				<!--card 1 s-->
				<div class="mui-card" style="margin: auto !important;">
					<div class="mui-card-header mui-card-media">
						<img src="../../img/touxiang.jpg" />
						<div class="mui-media-body">
							九寨沟，黄龙山三日行
							<p>￥500</p>
						</div>
					</div>
					<div class="mui-card-content" >
						<img src="../../img/xianlu_pic6.jpg" alt="" width="100%"/>
					</div>
				</div>
				<!--card 2 s-->
				<div class="mui-card" style="margin: auto !important;">
					<div class="mui-card-header mui-card-media">
						<img src="../../img/touxiang.jpg" />
						<div class="mui-media-body">
							峨眉山，乐山二日行
							<p>￥400</p>
						</div>
					</div>
					<div class="mui-card-content" >
						<img src="../../img/xianlu_pic5.jpg" alt="" width="100%"/>
					</div>
				</div>
				<button type="button" class="mui-btn mui-btn-blue mui-btn-block more" id="guangzhouMore">查看更多</button>
			
			</div>
			<!--出境游        e-->
			<!--自由行        s-->
			<div class="moduleTitle">自由行</div>
			<div class="ziyou">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-right freeImg" src="../../img/xianlu_pic2.jpg">
				            <div class="mui-media-body">
				                ￥300
				                <p class="mui-ellipsis freeDes">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-right freeImg" src="../../img/xianlu_pic1.jpg">
				            <div class="mui-media-body">
				               ￥400
				                <p class="mui-ellipsis freeDes">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-right freeImg" src="../../img/xianlu_pic3.jpg">
				            <div class="mui-media-body">
				                ￥500
				                <p class="mui-ellipsis freeDes">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
				            </div>
				        </a>
				    </li>
				</ul>
			</div>
			<!--自由行        e-->
		</div>
		<!--主内容区     e-->
	</body>
	<script type="text/javascript">
		var slider = mui("#slider");
		slider.slider({
			interval: 5000
		})
         //点击查看更多进入，线路的详情页
        $("button.more").on("tap",function(){
			mui.openWindow({
				url: "../detail/detail.html",
				id: "login"
			});
		});
	</script>
	

</html>